/**
 * create by Alec
 */
import React, { Component } from "react";
import PropTypes from "prop-types";
import './index.less';

export default class contrastChartDouble extends Component {
    constructor(props) {
        super(props);
    }
    /*
    data = {
        title, //标题
        type, //类型（周报／月报）
        totalEntry, //入职人数
        totalDismission, //离职人数
        transferIn, //转入人数
        transferOut, //转出人数
        startNum, //期初人数
        endNum, //期末人数
    }
    */
    static propTypes = {
        data: PropTypes.object
    };

    render() {
        const {
            title = '',
            type = '',
            totalEntry = 0,
            totalDismission = '',
            transferIn = '',
            transferOut = '',
            startNum = '',
            endNum = ''
        } = this.props.data || {};
        const totalValues = Number(totalEntry) / (Number(totalEntry) + Number(totalDismission));
        const transferValues = Number(transferIn) / (Number(transferIn) + Number(transferOut));

        return (
            <div className="contrast-chart-double">
                {
                    title &&
                    <div className="chart-header">
                        <div className="header-con">{title}</div>
                    </div>
                }

                <div className="chart-wrap">
                    <div className="chart-con">
                        <div className="colorBox">
                            <div className="week-box" style={{
                                width: `${totalEntry === 0 && totalDismission === 0
                                    ? 50
                                    : totalValues * 100}%`
                            }}>
                            </div>

                            <div className="month-box"></div>
                        </div>

                        <div className="content">
                            <div className="item">
                                <div className="item-lable">{type}入职</div>

                                <div className="item-value">{totalEntry}</div>
                            </div>

                            <div className="item right">
                                <div className="item-lable">{type}离职</div>

                                <div className="item-value">{totalDismission}</div>
                            </div>
                        </div>
                    </div>

                    <div className="chart-con">
                        <div className="colorBox">
                            <div className="week-box" style={{
                                width: `${transferIn === 0 && transferOut === 0
                                    ? 50
                                    : transferValues * 100}%`
                            }}>
                            </div>

                            <div className="month-box"></div>
                        </div>

                        <div className="content">
                            <div className="item">
                                <div className="item-lable">{type}调入</div>
                                <div className="item-value">{transferIn}</div>
                            </div>

                            <div className="item right">
                                <div className="item-lable">{type}调出</div>
                                <div className="item-value">{transferOut}</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div className="contrast-chart-footer">
                    <div className="content">
                        <span className="label">期初人数</span>
                        <span className="num">{startNum}</span>
                    </div>

                    <span className="center-line"></span>

                    <div className="content right">
                        <span className="label">期末人数</span>  
                       
                       {/* {
                            startNum !== endNum  && 
                            <span className="arrow">
                                { 
                                    endNum > startNum
                                    ?  <img src="https://img.alicdn.com/tfs/TB1XFdma5qAXuNjy1XdXXaYcVXa-29-32.png" />
                                    :  <img src="https://img.alicdn.com/tfs/TB1dplma5qAXuNjy1XdXXaYcVXa-29-32.png" />
                                }
                            </span>
                        } */}
                        <span className={`num`}>
                            {endNum}
                        </span>
                    </div>
                </div>
            </div>
        )
    }
} 